<template>
	<view class="content">
		<u-modal :show="showmodal" :negativeTop="160" :title="title" :showConfirmButton="false">
			<view class="slot-content">
				<u--input v-model="price" placeholder="请输入需提现的金额:" border="bottom" clearable></u--input>
			</view>
		</u-modal>
		<view class="top-card">

			<view class="top">
				<view class="top-left">
					<span style="font-size:21px;color:#ffffff;margin-bottom:6px">余额:</span>
					￥
				</view>
				<view class="top-right">
					{{ money }}
				</view>
			</view>
			<view class="content">
				<view class="content-left" @click="Toshouru">
					<view class="left-title">
						收入
					</view>
					<view class="left-content">
						<view class="left">
							￥
						</view>
						<view class="right">
							{{ balance }}
						</view>
					</view>
				</view>
				<view class="content-right">
					<view class="operate-right">
						<u-button type="success" :customStyle="{ width: '100px' }" size="medium"
							@click="withdraw()">提现</u-button>
					</view>


				</view>

			</view>

		</view>
		<!-- 空列表 -->
		<view v-if="empty == 'isempty'" class="empty">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">

			</u-empty>
		</view>

		<!-- 键盘 -->
		<u-keyboard @cancel="cancelkeyboard" @change="valChange" @confirm="comfirnmodal" @backspace="backspace"
			ref="uKeyboard" mode="number" :show="showkeyboard"></u-keyboard>


		<view class="tabs">
			<!-- 提现的状态卡 -->
			<u-tabs :list="statuslist" @click="selectTxRecord"></u-tabs>
		</view>

		<view class="data" v-if="empty == 'notempty'" v-for="item in recordlist" :key="item.id">
			<view class="data-content">
				<view class="title">
					{{ item.empnickname_text }}
				</view>
				<view class="math">
					-￥ {{ item.amount }}
				</view>
				<view class="time">
					{{ item.createtime_text }}
				</view>
			</view>

		</view>

		<!-- 消息提醒 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>

<script>
export default {
	onLoad() {

		this.auth = this.$u.auth.check()

		this.empid = uni.getStorageSync("empid") ? uni.getStorageSync("empid") : this.auth.id

		this.indexdata()
		this.tixianrecord()//提现记录
		this.txStatus()//提现记录
	},
	data() {
		return {
			title: '提现金额',

			value: "",
			status: 0,
			empty: "",
			empid: "",
			
			balance: 0.00,//收入
			money: 0.00,//余额
			price: "",//提现金额
			statuslist: [],
			recordlist: [],
			list: [],
			auth: {},
			showkeyboard: false,
			showmodal: false
		};
	},

	methods: {

		async selectTxRecord(e) {

			this.status = e.status
			this.tixianrecord()
		},
		async indexdata() {
			let data = {
				adminid: this.auth.id,
				stoid: this.auth.stoid
			}

			let result = await this.$u.api.admin.accountlist(data)
			if (result) {
				this.balance = result.data.commission
				this.money = result.data.money
			}
		},

		cancelkeyboard() {
			this.showkeyboard = false
			this.showmodal = false

		},
		withdraw() {

			this.showkeyboard = true
			this.showmodal = true

		},

		async comfirnmodal(e) {

			this.showkeyboard = false
			this.showmodal = false
			let data = {
				amount: this.price,

				empid: this.auth.id,
				status: 1,

			}

			let result = await this.$u.api.admin.commission(data)
			if (result.code) {
				this.$refs.notice.show({
					type: "success",
					message: result.msg,
					duration: 2200,
					complete: () => {
						this.tixianrecord()//提现记录
					}

				})
			} else {
				this.$refs.notice.show({
					type: "error",
					message: result.msg,
					duration: 2200,

				})
			}
		},
		// 提现的状态卡
		async txStatus() {
			let data = {
				empid: this.empid
			}
			let result = await this.$u.api.admin.txstatuslist(data)
			if (result.code) {
				this.statuslist = result.data
			}
		},
		async tixianrecord() {
			let data = {
				empid: this.empid,
				adminid: this.auth.id,
				num: this.status
			}
  
			let result = await this.$u.api.admin.TixianRecord(data)

			

			{
				if (result.data.length > 0) {
					this.empty = "notempty"

					this.recordlist = result.data


				} else {
					this.empty = "isempty"
				}
			}
		},
		valChange(val) {
			// 将每次按键的值拼接到value变量中，注意+=写法
			this.price += val;


		},
		// 退格键被点击
		backspace() {
			// 删除value的最后一个字符
			if (this.price.length) this.price = this.value.substr(0, this.price.length - 1);
		},
		Toshouru()
		{
			uni.$u.route({
				url:"/pagesA/admin/shouru",
				
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f5f6f7;
}

.content {
	position: relative;
}

.empty {
	position: absolute;
	left: 0;
	width: 100%;
	top: 350px;
}

.top-card {
	width: 90%;
	height: 450rpx;
	background-color: #fff;
	margin: 30rpx auto;
	border-radius: 30rpx;
	/* 设置统一的 border-radius 值 */
	border-bottom-left-radius: 0;
	/* 设置底部左侧边的圆角为 0 */
	border-bottom-right-radius: 0;

	/* 设置底部右侧边的圆角为 0 */
	.top {
		height: 150rpx;
		background-image: url('https://luxuries.h1668.com/uploads/20230801/bf08d7916a47a45590e75af305965bbf.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 30rpx;
		/* 设置统一的 border-radius 值 */
		border-bottom-left-radius: 0;
		/* 设置底部左侧边的圆角为 0 */
		border-bottom-right-radius: 0;
		/* 设置底部右侧边的圆角为 0 */
		display: flex;

		.top-left,
		.top-right {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			color: #f8e3c3;
		}

		.top-left {
			font-size: 1.4rem;
			margin-left: 20rpx;
		}

		.top-right {
			font-size: 2rem;
			margin-left: 5rpx;
		}
	}

	.operate {
		height: 80rpx;
		display: flex;

		.operate-left,
		.operate-right {
			width: 25%;
			height: 80rpx;

			text-align: center;

		}
	}

	.content {
		display: flex;
		height: 200rpx;


		.content-left {
			width: 50%;
			height: 100%;

			.left-title {
				font-size: 1.25rem;
				margin-top: 50rpx;
				text-align: center;
			}

			.left-content {
				margin-top: 20rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: black;

				.left {
					font-size: 1.25rem;
				}

				.right {
					font-size: 1.4rem;
				}
			}
		}

		.content-right {
			width: 50%;
			height: 100%;
			padding-top: 40px;
			padding-right: 15px;

			.right-title {
				font-size: 1.25rem;
				margin-top: 50rpx;
				text-align: center;
			}

			.right-content {
				margin-top: 20rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: black;

				.left {
					font-size: 1.25rem;
				}

				.right {
					font-size: 1.4rem;
				}
			}
		}
	}
}


.tabs {
	width: 90%;
	margin: 0 auto;
}

.data {
	width: 90%;
	height: auto;
	border-bottom: 1px solid #eeeeee;
	margin: 0 auto;
	background-color: #f5f6f7;

	.data-content:first-child {
		margin-top: 0;
	}

	.data-content {
		background-color: #fff;
		margin-top: 10rpx;
		padding: 10rpx;

		.title {
			text-align: left;
			color: black;
			font-size: 1rem;
		}

		.math {
			text-align: right;
			color: black;
			font-size: 0.9rem;
		}

		.time {
			text-align: left;
			font-size: 1rem;
		}
	}
}
</style>
